<template>
  <div class="app-container">
    <!-- 查询条件保持不变 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="订单号" prop="orderNo">
        <el-input
          v-model="queryParams.orderNo"
          placeholder="请输入订单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="平台订单号" prop="platformOrderNo">
        <el-input
          v-model="queryParams.platformOrderNo"
          placeholder="请输入平台订单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="分配的系统审核员ID" prop="sysUserId">
        <el-input
          v-model="queryParams.sysUserId"
          placeholder="请输入分配的系统审核员ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="commentList">
      <el-table-column label="主键ID" align="center" prop="id" />
      <el-table-column label="需要评论？" align="center" prop="whetherComment" />

      <!-- 多张订单图片 -->
      <el-table-column label="订单图片" align="center" prop="orderPicture" width="250">
        <template slot-scope="scope">
          <div class="image-group">
            <image-preview
              v-for="(img, index) in scope.row.orderPicture.split(',')"
              :key="index"
              :src="img"
              :width="50"
              :height="50"
            />
          </div>
        </template>
      </el-table-column>

      <!-- 多张小票凭证图片 -->
      <el-table-column label="小票凭证图片" align="center" prop="smallVoucherPicture" width="250">
        <template slot-scope="scope">
          <div class="image-group">
            <image-preview
              v-for="(img, index) in scope.row.smallVoucherPicture.split(',')"
              :key="index"
              :src="img"
              :width="50"
              :height="50"
            />
          </div>
        </template>
      </el-table-column>

      <!-- 多张评论图片 -->
      <el-table-column label="评论图片" align="center" prop="commentPicture" width="250">
        <template slot-scope="scope">
          <div class="image-group">
            <image-preview
              v-for="(img, index) in scope.row.commentPicture.split(',')"
              :key="index"
              :src="img"
              :width="50"
              :height="50"
            />
          </div>
        </template>
      </el-table-column>

      <el-table-column label="订单号" align="center" prop="orderNo" />
      <el-table-column label="平台订单号" align="center" prop="platformOrderNo" />
      <el-table-column label="分配的系统审核员ID" align="center" prop="sysUserId" />

      <!-- 审核操作按钮 -->
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="handleReviewTrue(scope.row)">通过</el-button>
          <el-button type="warning" size="mini" @click="handleReviewFalse(scope.row)">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listComment, reviewTure, reviewFalse } from "@/api/system/comment"

export default {
  name: "Comment",
  data() {
    return {
      loading: true,
      commentList: [],
      total: 0,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: null,
        platformOrderNo: null,
        sysUserId: null,
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询用户评论信息列表 */
    getList() {
      this.loading = true
      listComment(this.queryParams).then(response => {
        this.commentList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.resetFields()
      this.handleQuery()
    },
    /** 审核通过 */
    handleReviewTrue(row) {
      reviewTure({ orderNo: row.orderNo }).then(response => {
        if (response.code === 200) {
          this.$message.success('审核通过成功')
          this.getList()
        } else {
          this.$message.error(response.msg || '审核通过失败')
        }
      }).catch(() => {
        this.$message.error('请求出错，请稍后再试')
      })
    },

    /** 审核驳回，输入理由 */
    handleReviewFalse(row) {
      this.$prompt('请输入驳回理由', '审核驳回', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '驳回理由不能为空',
        inputType: 'textarea'
      }).then(({ value }) => {
        reviewFalse({ orderNo: row.orderNo, reviewStatusDesc: value }).then(response => {
          if (response.code === 200) {
            this.$message.success('审核驳回成功')
            this.getList()
          } else {
            this.$message.error(response.msg || '审核驳回失败')
          }
        }).catch(() => {
          this.$message.error('请求出错，请稍后再试')
        })
      }).catch(() => {
        // 用户取消输入，不处理
      })
    }
  }
}
</script>

<style scoped>
.image-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
</style>
